<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>贪吃蛇</title>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
  <style type="text/css">
  body {
    margin: 0;
    padding: 0;
    color: #666;
  }
  .pannel {
    width: 300px;
    margin: 20px auto 0;
  }

  .pannel-header {
    position: relative;
    font-size: 20px;
  }
  .pannel-header h1 {
    margin: 0;
    font-size: 25px;
  }

  .pannel-header strong {
    position: absolute;
    right: 0;
    bottom: 0;
  }
  .pannel-footer {
    margin-top: 10px;
    text-align: center;
  }
  .pannel-footer input {
    font-size: 16px;
  }

  .pannel-footer .btn-group {
    margin: 10px 0;
  }
  </style>
</head>
<body>
  <div class="pannel">
    <div class="pannel-header">
        <h1>贪吃蛇</h1>  
        <strong>分数：<span class="score-board">0</span></strong>
      </h2>
    </div>
      <div class="pannel-content">
        <canvas id="canvas"></canvas>
      </div>
      <div class="pannel-footer">
        <div class="btn-group">
          <input type="button" value="←(左箭头/A)" onclick="game.switchDirection('left')" />
          <input type="button" value="→(右箭头/D)" onclick="game.switchDirection('right')" />
          <input type="button" value="↑(上箭头/W)" onclick="game.switchDirection('up')" />
          <input type="button" value="↓(下箭头/S)" onclick="game.switchDirection('down')" />
        </div>
        <div class="btn-group">
          <input type="button" value="开始/暂停(空格)" onclick="game.toggleState();"/>
          <input type="button" value="重开一局(N)" onclick="game.restart(canvas);"/>
        </div>
      </div>
  </div>
  <script type="text/javascript" src="js/rectangle.js"></script>
  <script type="text/javascript" src="js/index.js"></script>
  <script type="text/javascript">
    game.start();
    function onFocus() {return this.blur();}
    Array.from(document.querySelectorAll('input[type="button"],button')).forEach(e=>{
      e.onfocus = onFocus;
    });
  </script>
</body>
</html>